本文实例讲述了jquery实现点击变换导航样式的方法。分享给大家供大家参考。具体如下：

这里分享一个导航点击变换样式的代码，近来看到很多网站的导航都是点击后导航样式跟着变化，今天就使用jqurey简单实现这一功能，高手勿喷。

运行效果截图如下：

在线演示地址如下：

http://演示。JB 51。net/js/2015/jquery-click-cha-nav-style-codes/

具体代码如下：

！DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN ' ' http://www .w3。org/TR/XHTML 1/DTD/XHTML 1-Transitional。DTD ' html xmlns=' http://www .w3。org/1999/XHTML ' hearteta http-equiv=' Content-Type ' Content=' text/html；' /title导航点击变换样式/title style * { margin 33600；划水：0;border:0pxlist样式： nonemargin :0 auto } * a { text-decoration : none；颜色： # FFF；} ul { width:800px高度：30 px背景-颜色： # C33} ul li { float:left宽度宽度：160像素高度：30 px线高：30 px文本对齐：居中；color: # FFFFFF}ul阿利{ color: # FFFFFF显示：块；宽度宽度：160像素高度：30 px文本装饰：无；}.第一{背景色-颜色： # 0000 ff} ul阿利：悬停{ color : # FFF；显示：块；宽度宽度：160像素高度：30 px文本修饰：下划线；背景-颜色： # 03F}/style脚本类型=' text/JavaScript ' src=' http : jquery-1。6 .2 .量滴js/script脚本语言=' JavaScript '类型=' text/JavaScript ' $(文档)。ready(function (){ $('li ')).每个（函数（索引){ $(这个)).单击(function(){ $('li ')).移除CLaSS(“第一个”)；$('li ').eq(指数)。addCLaSS(' first ')；});});});/script/head dyulli class=' first ' a href=' # '首页/a/lilia href='# '列表/a/lilia href='# '内容/a/lilia href='# '联系/a/lilia href='# '关于/a/li/ul/body/html希望本文所述对大家的jquery程序设计有所帮助。

版权声明：jquery实现点击变换导航样式的方法是由宝哥软件园云端程序自动收集整理而来。如果本文侵犯了你的权益，请联系本站底部QQ或者邮箱删除。